<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="../include/taglib.jsp"%>
<%
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Pragrma", "no-cache");
    response.setDateHeader("Expires", 0);
    Long resid = Long.parseLong(request.getParameter("id"));
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>linux综合性能页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta name="Keywords" content=" " />
<meta name="Description" content=" " />
<%@ include file="../include/common.jsp"%>


<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/style/default/bsm/perf/listPage.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.jqueryplugin.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/Xslider.js"></script>

 <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTLine.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTMemLine.js"></script>		
 <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTLED.js"></script>		
 <script type="text/javascript" src="${pageContext.request.contextPath}/jsp/performance/data/RTMemLed.js"></script>		



<script type="text/javascript">
	
    //网络接口初始化
    var netFlowColChart;
    var netByteColChart;
    function initNetwork() {
		if(typeof netFlowColChart == undefined || netFlowColChart == null){
			netFlowColChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","netFlowColChart1", "100%", "130", "0", "1" );
			netByteColChart =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/MSSpline.swf?ChartNoDataText=没有数据","netByteColChart1", "100%", "130", "0", "1" );
		}
		$.ajax({
			url : 'real-time!childResList.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				childType:'1201060600000'
			},
			success : function(data) {
				$('#netlistwraper > .videolist ul ').remove('li');
				$.each(data.res,function(i,index){
					$('#netlistwraper > .videolist ul ').append('	<li><span id='+index.id+' class="listspan">'+index.name+'</span> </li>');
				});	
				$("#netlistwraper").Xslider({
					unitdisplayed : 4,
					numtoMove : 2,
					loop : "cycle",
					dir : "V"
				});
				
				$('#netlistwraper .videolist ul li').click(function(){
					$(this).addClass('liselected').siblings().removeClass('liselected');
					$.ajax({
						url : 'real-time!get2LineChart.action', // 
						type : 'POST',
						dataType : "json",
						data : {
							resId :$(this).children('span').attr('id'),
							propIds:'120106000000005,120106000000001,120106000000002,120106000000004'
						},
						success : function(dataset) {
							netFlowColChart.setJSONData(dataset);
							netFlowColChart.render("netFlowColDiv");
						}
					});
					
					$.ajax({
						url : 'real-time!get2LineChart.action', // 
						type : 'POST',
						dataType : "json",
						data : {
							resId :$(this).children('span').attr('id'),
							propIds:'120106000000006,120106000000007'
						},
						success : function(dataset) {
							netByteColChart.setJSONData(dataset);
							netByteColChart.render("netByteColDiv");
						}
					});
				});
				$('#netlistwraper .videolist ul li :first').click();
			}
		});
				
		//
		
	}
    
	
	
	var fsColChartc;
	function initBaseInfo(){
			
			//基本信息
			$.ajax({
				url : 'real-time!getBaseInfo.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propIds:'attr_110102000000004,attr_110100000000002,prop_110100000000006'
				},
				success : function(data) {
					$('#attr_110102000000004').text(data.attr_110102000000004); //用户名
					$('#attr_110100000000002').text(data.attr_110100000000002); //CPU核数
					$('#prop_110100000000006').text(data.prop_110100000000006); //丢包率
					$('#resIp').text(data.ip);
				}
			});
			
			//磁盘
			if(typeof fsColChartc == undefined || fsColChartc == null){
				fsColChartc =  new FusionCharts( "${pageContext.request.contextPath}/resources/charts/Column2D.swf","fsColChart11", "100%", "130", "0", "1" );
			}
			$.ajax({
				url : 'real-time!get2ColumnChart.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					detail:1,
					childType:'1201100600000',
					propIds:'120110000000003',
					top:'5'
				},
				success : function(data) {
					fsColChartc.setJSONData(data);
					fsColChartc.render("fsColChart");
				}
			});
	}
	
	
	var cpuVRealLed;
	var  cpuHisLine;
	var  memoryVRealLed	;
	var  memoryHisLine;
	function initRealTimeChart(){
		
			cpuVRealLed =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/VLED.swf", "cpuVled11", "100%", "130", "0", "1" );
		    cpuVRealLed.setXMLData(RTString);
	        cpuVRealLed.render("cpuVReal");
	        
	         cpuHisLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/RealTimeLine.swf", "cpuHisLine11", "400", "130", "0", "1" );
	        cpuHisLine.setXMLData(RTCpuHisString);
	        cpuHisLine.render("cpuHis");
	        
		    //内存LED图
	         memoryVRealLed =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/VLED.swf", "messmoryVled11", "100%", "130", "0", "1" );
	        memoryVRealLed.setXMLData(RTMemString);
	        memoryVRealLed.render("memoryVReal");
	        
	       //内存实时线图
	       	 memoryHisLine =  new FusionCharts("${pageContext.request.contextPath}/resources/charts/RealTimeLine.swf", "memoryHisLine11", "400", "130", "0", "1" );
	       	memoryHisLine.setXMLData(RTMemHisString);
	       	memoryHisLine.render("memoryhis");
     
	}
	
	function freshMemData(){
		var cpuVLEDV = getChartFromId("cpuVled11");
		var cpuHisLineV = getChartFromId("cpuHisLine11");
		var memHisLineV = getChartFromId("memoryHisLine11");
		var memVLEDV = getChartFromId("messmoryVled11");
        var currDate = new Date();
        var label= currDate.getHours() + ":" + currDate.getMinutes() + ":" + currDate.getSeconds();
        
        //cpu
        $.ajax({
			url : 'real-time!getRealTimeVal.action', 
			type : 'POST',
			dataType : "json",
			data : {
				resId :<%=resid %>,
				propid:'110100000000002'
			},
			success : function(data) {
				var strData = "&label=" + label + "&value=" + data;
				cpuVLEDV.feedData("&value=" + data);
				cpuHisLineV.feedData(strData);
			}
		});
    	
        
        //内存
		 $.ajax({
				url : 'real-time!getRealTimeVal.action', // 
				type : 'POST',
				dataType : "json",
				data : {
					resId :<%=resid %>,
					propid:'1201020600000_120102000000005'
				},
				success : function(data) {
					var strData = "&label=" + label + "&value=" + data;
					memHisLineV.feedData(strData);
					memVLEDV.feedData("&value=" + data);
				}
			  });
		 return false;
	}
	
	$(document).ready(function() {
			initBaseInfo();
			initRealTimeChart();
			initNetwork();
	
		//CPU 内存 每10S刷新一次
		setInterval('freshMemData()',5000);
		setInterval('initBaseInfo()',60000);
		
				
	});
</script>

</head>
<body>

	<div class="column">
		<div class="col-main">
			<!--基本信息-->
			<!--@end基本信息-->
			<div class="col-r-main w-100-h-400" >
				<div class="col-v-rate-extra" style="width:35%">
					<h2 class="title-h2 m-0">基本信息</h2>
						<ul class="col-l-ul">
						<li><span class="col-l-ul-l" >操作系统:</span><span 
									class="col-l-ul-r"><img src="${pageContext.request.contextPath}/style/default/bsm/perf/images/windows24_24.png">&nbsp;&nbsp;Windows</span>
						</li>
						<li><span class="col-l-ul-l" class="baseinfo">IP:</span><span id="resIp"
							class="col-l-ul-r"></span>
						</li>
						<li><span class="col-l-ul-l" class="baseinfo">用户名:</span><span id="attr_110102000000004"
							class="col-l-ul-r"></span>
						</li>
						<li><span class="col-l-ul-l" class="baseinfo">CPU核数:</span><span id="attr_110100000000002"
							class="col-l-ul-r"></span>
						</li>
						<li><span class="col-l-ul-l" class="baseinfo">丢包率:</span><span id="prop_110100000000006"
							class="col-l-ul-r"></span>
						</li>
				     </ul>
				</div>
				<!--@end基本信息-->
				<div class="col-v-rate-extra f-r" style="width:63%">
				  <h2 class="title-h2 m-0">CPU使用率</h2>
				   <div id="cpuVReal" style="width:80px;height:180px; float:left;overflow:hidden;clear:none;  margin-left:1px;"></div>
				   <div id="cpuHis"  style="width:400px;height:180px;float:left;clear:none; background:#eee;"></div>
			    </div>
			    
			     <div class="col-v-rate-extra" style="width:35%">
		            <h2 class="title-h2 m-0">磁盘使用率</h2>
			       <div id="fsColChart"></div>
			    </div>
			    
				<div class="col-v-rate-extra f-r" style="width:63%">
				   <h2 class="title-h2 m-0"> 内存使用率</h2>
				   <div id="memoryVReal" style="width:80px;height:180px; float:left;overflow:hidden;clear:none; background:#ccc; margin-left:1px;"></div>
				   <div id="memoryhis"  style="width:180px;height:180px;float:left;clear:none; background:#eee;"></div>
			    </div>
		 </div>   
	   </div>
	 </div>

	  
 		<div class="column b-1">
			<h2 class="title-h2 m-0">网络接口子资源 [当天趋势图]-[输入流量,输入出错流量,输出流量,输出出错流量]-[接收Bytes,发送Bytes]</h2>
			    <div class="col-l-extra w-7" >
					<ul class="col-l-ul">
						<div id="netlistwraper">
						 <a class="abtn aright" href="#down"></a>
							<div class="videolist">
								<ul>
								</ul>
							</div>
							<a class="abtn aleft" href="#up" ></a>
						</div>
					</ul>
				</div>
				<div class="col-net-main p-40">
				    <div id="netFlowColDiv"></div>
			    </div>
				<div class="col-net-main p-40">
				    <div id="netByteColDiv"></div>
			    </div>
	  </div>
			 
	  <div class="column" style="width:100%;height:5px;"></div>
</body>